<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-22 13:40:14
 * @LastEditors: chaixinyu
 * @LastEditTime: 2023-01-18 21:01:00
-->
<template>

  <div class="my-course">
    
    <!-- 课程标题 -->
    <van-nav-bar class="nav-bar" title="课程" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>

        <!-- 气泡弹出框 -->
        <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect"  placement="bottom-end" class="course-popover">
          <template #reference>
            <van-icon name="plus" size="20" />
          </template>
        </van-popover>

      </template>
    </van-nav-bar>

    <!-- 搜索框 -->
    <van-search v-model="value" shape="round" placeholder="搜索" @search="onSearch"/>

    <!-- 课程 -->
    <van-cell-group inset >

      <van-cell title="单元格" is-link class="cell" @click="goCourseInfo(my.my_course_id,my.my_course_name,my.my_course_msg)" v-for="my in myCourseList" :key="my.my_course_id">

        <template #title>

          <!-- 课程图标 -->
          <van-image width="50" height="50" class="course-img"
            :src="my.my_course_img" />

          <!-- 课程名称 & 课程负责老师 -->
          <div class="course-box">
            <span class="custom-title courseName">{{ my.my_course_name }}</span>
            <span class="custom-title teaName">{{ my.my_course_teacher }}</span>
          </div>
        </template>

      </van-cell>

    </van-cell-group>
    <MapContainer/>
  </div>


</template>

<script setup>
import { ref,onMounted,computed } from 'vue';
// 引入vant
import { NavBar, showToast, Search, Cell, CellGroup, Popover } from 'vant';
// 引入路由
import { useRouter } from 'vue-router'
// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';

// 实例化仓库对象
const course = useCourseStore()

// 解构 方法
const {getMyCourseList} = course

// 解构 数据
const {myCourseList} = storeToRefs(course)

// 组件挂载完毕渲染页面
onMounted( async() => {
  try {
    await getMyCourseList(1)
  } catch (error) {
    alert(error.message)
  }
})
// 实例化路由
const router = useRouter()

// 搜索框
const value = ref('')

// 点击键盘上的搜索/回车按钮后触发
const onSearch = async(keyword) => {
  try {
    await getMyCourseList(1,keyword)
  } catch (error) {
    alert(error.message)
  }
};

// 点击左侧箭头返回上一页
const onClickLeft = () => history.back();

// 点击➕弹出
const onClickRight = () => {

};

// 是否显示气泡
const showPopover = ref(false);

// 通过 actions 属性来定义菜单选项
const actions = [
  { text: '自选课程' },
];

// 跳转到自选课程页面
const onSelect = (action) => {
  router.push('/morecourse')
}

// 跳转到课程信息页面
const goCourseInfo = (myCourseId,courseTitle,courseMsg) => {
  // 保存 courseId
  course.courseId = myCourseId
  course.courseTitle = courseTitle
  course.courseMsg = courseMsg
  
  // 路由跳转
  router.push('/courseinfo')
}

</script>

<style lang="less" scoped>
html {
  background-color: #f4f5f7;
}

  
// 我的课程
.my-course {
  overflow: hidden;
  background-color: #f4f5f7;
  
   .van-popover--light .van-popover__content {
    margin-right: -10px;
  }

  :deep(.van-icon) {
      color: black;
  }

  .van-popover__action {
    width: 100px;
  }

  .van-popover[data-popper-placement^=bottom] .van-popover__arrow{
    left: 80px;
  }

   :deep(.van-nav-bar) {
    width: 100%;
    position: fixed;
  }

 
  :deep(.van-search) {
    margin-top: 46px;
    background-color: #f5f6f8;
  }
  :deep(.van-search__content) {
      background-color: #ffffff;
  }

  .van-cell-group {
    background-color: #f4f5f7;

    .cell {
      margin-bottom: 15px;
      border-radius: 7px;

      :deep(.van-cell__title) {
        display: flex;
        flex-flow: row ;

        .van-image__img {
          border-radius: 5px;

        }

        .course-box {
          display: flex;
          flex-flow: column;
          margin-left: 15px;

          .courseName {
            width: 210px;
            // font-family: "方正姚体";
          }

          .teaName {
            font-size: 13px;
            // font-family: "楷体";
            color: #d6d3d5;

          }

        }
      }


    }

  }

}
</style>

